<template>
  <el-container id="container">

    <!-- 侧栏导航 -->
    <el-aside :width="aside.width">
      <!-- 菜单 -->
      <el-menu unique-opened router background-color="#fff" text-color="#000" :default-active="activePath"
        :collapse="aside.collapse">
        <!-- 折叠/展开 -->
        <el-menu-item style="padding: 0;">
          <div id="toggle" :class="aside.collapse_class" @click="toggleCollapse" style="text-align:center;">
          </div>
        </el-menu-item>
        <!-- 固定项 -->
        <el-menu-item index="/default_page">
          <i class="el-icon-s-home"></i>
          <span>主页</span>
        </el-menu-item>
        <!-- 动态UI导航(与权限关联) -->
        <el-submenu :index="ng.route" v-for="ng in dynamicNavigationList" :key="ng.route"
          v-show="(uiAuthValidateIsNotNeeded || ng.finalStatus)">
          <template slot="title">
            <i :class="ng.iconClass"></i>
            <span>{{ ng.title }}</span>
          </template>
          <!-- 动态二级UI导航(与权限关联) -->
          <el-menu-item :index="ni.route" v-for="ni in ng.children" :key="ni.route"
            v-show="(uiAuthValidateIsNotNeeded || ni.finalStatus)">
            <template slot="title">
              <i :class="ni.iconClass"></i>
              <span>{{ ni.title }}</span>
            </template>
          </el-menu-item>
        </el-submenu>

        <!-- 静态导航(无须权限) -->
        <el-submenu :index="ng.route" v-for="ng in staticNavigationList" :key="ng.route">
          <template slot="title">
            <i :class="ng.iconClass"></i>
            <span>{{ ng.title }}</span>
          </template>
          <el-menu-item :index="ni.route" v-for="ni in ng.children" :key="ni.route">
            <template slot="title">
              <i :class="ni.iconClass"></i>
              <span>{{ ni.title }}</span>
            </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header>
        <div class="haeder_part">
          <!-- 用户名 -->
          <div class="header_item">
            <el-button v-if="userName">{{ userName }}</el-button>
          </div>
          <!-- 退出系统 -->
          <div class="header_item">
            <el-button @click="logout" class="iconfont icon_Exit"></el-button>
          </div>
          <!-- UI显示设置 -->
          <div class="header_item">
            <el-button @click="showSystemSettings" class="el-icon-setting"></el-button>
          </div>
        </div>
        <el-dialog title="系统设置" :visible="settings.visible" :before-close="hideSystemSettings">
          <el-radio-group v-model="settings.ui.showAllUiAUths" @change="refreshUiAuths">
            <el-radio-button :label="true">展示所有UI</el-radio-button>
            <el-radio-button :label="false">仅展示可用UI</el-radio-button>
          </el-radio-group>
          <div slot="footer">
            <el-button @click="hideSystemSettings">关闭</el-button>
          </div>
        </el-dialog>
      </el-header>
      <!-- 二级路由视图区 -->
      <el-main>
        <router-view></router-view>
      </el-main>

    </el-container>
  </el-container>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  data() {
    return {
      // 静态导航
      staticNavigationList: [
        // 统计图表
        {
          route: "chart",
          title: "统计图表",
          iconClass: "el-icon-s-data",
          children: [
            {
              route: "/radar_chart",
              title: "雷达图",
              iconClass: "el-icon-menu",
            },
            {
              route: "/bar_chart",
              title: "柱状图",
              iconClass: "el-icon-menu",
            },
            {
              route: "/line_chart",
              title: "堆叠折线图",
              iconClass: "el-icon-menu",
            },
            {
              route: "/pine_chart",
              title: "饼状图",
              iconClass: "el-icon-menu",
              children: []
            },
            {
              route: "/candle_stick_chart",
              title: "K线图",
              iconClass: "el-icon-menu",
            },
            {
              route: "/theme_river_chart",
              title: "主题河流图",
              iconClass: "el-icon-menu",
            },

          ]
        },
        // 个人中心
        {
          route: "person_center",
          title: "个人中心",
          iconClass: "el-icon-s-custom",
          children: [
            {
              route: "/dashboard",
              title: "工作台",
              iconClass: "el-icon-menu",
            }
          ]
        },
      ],
      // 侧栏
      aside: {
        // 绑定项
        width: '270px',
        // 配置项
        collapseWidth: '64px',
        expandWidth: '270px',
        collapse: false,
        // 绑定项
        collapse_class: 'iconfont icon_toggle_left',
        // 配置项
        collapse_class_fold: 'iconfont icon_toggle_left',
        collapse_class_unfold: 'iconfont icon_toggle_right'
      },
      // 系统设置
      settings: {
        // 可见性
        visible: false,
        // ui设置
        ui: {
          // 是否显示全部UI，true-显示全部，false-仅显示可用的
          showAllUiAUths: false
        }
      }
    }
  },
  computed: {
    // 从Vuex中映射生成计算属性：动态导航、是否不需要进行UI权限验证、用户名、当前激活导航路径
    ...mapGetters('uiAuthModule', ['dynamicNavigationList', 'uiAuthValidateIsNotNeeded']),
    ...mapGetters('userModule', ['userName']),
    ...mapGetters('navigationModule', ['activePath']),
  },

  methods: {
    // #region 系统设置开始
    // 借助mapActions生成与Vuex中的actions中的方法对话的方法：重新计算UI权限
    ...mapActions('uiAuthModule', { refreshUiAuths: 'refreshUiAuths' }),
    // 显示系统设置对话框
    showSystemSettings() {
      this.settings.visible = true
    },
    // 隐藏系统设置对话框
    hideSystemSettings() {
      this.settings.visible = false
    },
    // #endregion 系统设置结束


    // 退出登录
    async logout() {
      try {
        await this.$confirm(`确定退出系统吗`)
        //清除存储信息，路由至登录页
        window.sessionStorage.clear()
        this.$router.push('/login')
      } catch (e) {
        if (e === 'cancel') {
          return this.$message.info(`取消退出`)
        }
        this.$message.error(e.msg)
      }
    },
    // 侧栏 折叠-展开 切换
    toggleCollapse() {
      this.aside.collapse = !this.aside.collapse
      if (this.aside.collapse) {
        this.aside.width = this.aside.collapseWidth
        this.aside.collapse_class = this.aside.collapse_class_unfold
      } else {
        this.aside.width = this.aside.expandWidth
        this.aside.collapse_class = this.aside.collapse_class_fold
      }
    },
  },

}
</script>

<style lang="less" scoped>
// 主页容器
#container {
  // 高度为视口的100%
  height: 100vh;
}

// 头部
.el-header {
  padding: 0px 10px 0px 0px;
  box-shadow: 0px 1px 2px #000;

  .haeder_part {
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;

    .el-button,
    el-radio-button {
      border-radius: 0;
      margin-left: 10px;
      box-shadow: 0 0 2px #000;
    }
  }
}

// 侧栏导航
.el-menu {
  border: 0px;
}

// 当前激活菜单
.el-menu-item.is-active {
  box-shadow: 10px 0px 0px #409eff inset;
}

// 主区域
.el-main {
  padding: 10px 0px 0px 20px;
}

// 侧栏
.el-aside {
  box-shadow: 5px 0px 10px #000;
  transition: .3s all linear;

  .iconfont {
    margin-left: 5px;
    font-size: 16px;
  }
}
</style>
